<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>查看病人-病理图像病灶自动分割系统</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <style>
        .layui-body {
            left: 0;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black" style="background-color: #23262e!important;">
                {#                <img src="{{ url_for('static',filename='img/logo.png') }}" alt="" style="width: auto;height: 95%"/>#}
            </div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layui-hide-xs"><a href="/user/home">首页</a></li>
                <li class="layui-nav-item layui-hide-xs layui-this"><a href="javascript:void(0)">查看病人</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="/image/solo_mark">单分辨率病灶自动标注</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="/image/multi_mark">多分辨率病灶自动标注</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:void(0)">{{ user.name }}</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="/user/logout">登出</a></li>
            </ul>
        </div>

        <div class="layui-body" style="margin-top: 50px">
            搜索姓名：
            <div class="layui-inline">
                <input class="layui-input" name="name" id="name" autocomplete="off">
            </div>
            <button id="render_form_btn" class="layui-btn">搜索</button>
            <table class="layui-hide" id="p_table" lay-filter="p_table"></table>
            <script type="text/html" id="toolbar_t">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="check_image">查看病理图像</button>
                    <button class="layui-btn layui-btn-sm" lay-event="update_p">更新病人资料</button>
                    <button class="layui-btn layui-btn-sm" lay-event="delete_p">删除病人资料</button>
                    <button class="layui-btn layui-btn-sm" lay-event="add_p">新增病人</button>
                </div>
            </script>
        </div>
    </div>
</div>
<form id="patient_form" class="layui-form" action="javascript:void(0)" lay-filter="patient_form"
      style="display: none;margin: 30px 0 80px 0">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入病人姓名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">病症</label>
            <div class="layui-input-inline">
                <input type="text" name="disease" lay-verify="required" autocomplete="off" placeholder="请输入病人病症"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
                <input type="number" name="age" lay-verify="number" autocomplete="off" placeholder="请输入病人年龄"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="bioarea-wrap">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <select id="province" name="province" class="level-1-select" lay-search="" lay-verify="required"
                    lay-filter="#bioarea-wrap1level">
            </select>
        </div>
        <div class="layui-input-inline">
            <select id="city" name="city" class="level-2-select" lay-search="" lay-verify="required"
                    lay-filter="#bioarea-wrap2level">
            </select>
        </div>
        <div class="layui-input-inline">
            <select id="county" name="county" class="level-3-select" lay-search="" lay-verify="required"
                    lay-filter="#bioarea-wrap3level">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-block" style="margin-right: 10px">
            <input type="text" name="address" lay-verify="required" autocomplete="off" placeholder="如：XX小区X楼X室"
                   class="layui-input">
        </div>
    </div>
</form>
<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    layui.config({
        base: '{{ url_for('static',filename='js/') }}'
    }).extend({
        bioarea: 'bioarea'
    });
</script>
<script>
    //JS
    layui.use(['table', 'layer', 'form', 'bioarea'], function () {
        let table = layui.table
            , layer = layui.layer
            , form = layui.form
            , bioarea = layui.bioarea
            , $ = layui.jquery;
        $p_form = $('#patient_form')
        {#渲染表单#}
        init_form()
        {#渲染表格#}
        render_table()
        //头工具栏事件
        table.on('toolbar(p_table)', function (obj) {
            let row = table.checkStatus(obj.config.id).data[0]; //获取选中行状态
            if (['check_image', 'delete_p', 'update_p'].includes(obj.event) && !row) {
                layer.alert('请先选中一个病人!')
                return;
            }
            switch (obj.event) {
                case 'check_image':
                    if (!row.image_id) {
                        layer.alert('该病人暂无病理图像')
                    } else {
                        layer.open({
                            type: 2,
                            area: ['95%', '95%'],
                            content: [`/image/show_result?id=${row.image_id}`, 'no']
                        })
                    }
                    break;
                case 'add_p':
                    reload_form()
                    edit_patient('add')
                    break;
                case 'update_p':
                {#update情况时，展示表格要复现表格#}
                    let address = row.address.split('-')
                    form.val('patient_form', {
                        'name': row.name,
                        'disease': row.disease,
                        'age': row.age,
                        'sex': row.sex,
                        'address': address[3]
                    })
                    try {
                        reload_form({
                            provinceCode: bioarea.getCodeByName(address[0]),
                            cityCode: bioarea.getCodeByName(address[1]),
                            countyCode: bioarea.getCodeByName(address[2])
                        })
                    } catch (e) {
                        {#console.error(e)#}
                    }
                    edit_patient('update', row)
                    break;
                case 'delete_p':
                    layer.confirm('确定删除?', function (confirm_index) {
                        let index;
                        $.ajax({
                            type: 'POST',
                            url: '/patient/delete',
                            data: {'id': row.id},
                            beforeSend: function () {
                                index = layer.load(1)
                            },
                            success: function (res) {
                                if (res.success) {
                                    layer.msg("操作完成")
                                    reload_table()
                                } else {
                                    layer.alert(res.msg)
                                }
                            },
                            dataType: 'json',
                            error: function (xhr, status, err) {
                                layer.alert("系统错误，请重试");
                            },
                            complete: function () {
                                layer.close(index)
                            }
                        });
                        layer.close(confirm_index);
                    })
                    break;
            }
        });

        {#搜索按钮点击事件#}
        $('#render_form_btn').click(function () {
            reload_table()
        })

        {#渲染表格#}

        function reload_table() {
            table.reloadData('p_table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    name: $('#name').val()
                }
            })
        }
        {#初始化表格#}
        function render_table() {
            table.render({
                elem: '#p_table'
                , id: 'p_table'
                , defaultToolbar: []
                , url: '/patient/data_page'
                , where: {
                    name: $('#name').val()
                }
                , toolbar: '#toolbar_t'
                , cols: [[
                    {type: 'radio'}
                    , {field: 'name', title: '姓名'}
                    , {field: 'disease', title: '病症'}
                    , {
                        width: 200, title: '地址', templet: function (row) {
                            let array = row.address.split('-')
                            return `${array[0]}-${array[1]}-${array[2]}`
                        }
                    }
                    , {field: 'age', title: '年龄', sort: true}
                    , {
                        title: '性别', templet: function (row) {
                            if (row.sex === '2') {
                                return '女'
                            } else {
                                return '男'
                            }
                        }
                    }
                    , {
                        title: '是否存在标注图像', templet: function (row) {
                            if (row.image_id) {
                                return '是'
                            } else {
                                return '否'
                            }
                        }
                    }
                    , {field: 'last_time', title: ' 标注时间', sort: true}
                ]]
                , page: true
                {#, css:#}
                {#    `.layui-table-view{#}
                {#        margin-top:50px#}
                {#    }`#}
            });
        }
        {#添加或修改操作#}
        function edit_patient(type, row) {
            let layer_form_index = layer.open({
                type: 1,
                btn: ['保存', '关闭'],
                content: $p_form, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                success: function () {
                    $p_form.show()
                },
                end: function () {
                    $p_form.hide()
                },
                yes: function () {
                    if (form.validate('#patient_form')) {
                        layer.confirm('确定提交?', function (confirm_index) {
                            let patient = form.val("patient_form");
                            {#patient.province = $('#province option:selected').text()#}
                            patient.province = bioarea.getNameByCode(patient.province)
                            {#patient.city = $('#city option:selected').text()#}
                            patient.city = bioarea.getNameByCode(patient.city)
                            {#patient.county = $('#county option:selected').text()#}
                            patient.county = bioarea.getNameByCode(patient.county)
                            patient.address = `${patient.province}-${patient.city}-${patient.county}-${patient.address}`;
                            let url;
                            if (type === 'add') {
                                url = '/patient/add'
                            } else {
                                url = '/patient/update'
                                patient.id = row.id
                            }
                            let index;
                            $.ajax({
                                type: 'POST',
                                url: url,
                                data: patient,
                                beforeSend: function () {
                                    index = layer.load(1)
                                },
                                success: function (res) {
                                    if (res.success) {
                                        layer.msg("操作完成")
                                        layer.close(layer_form_index)
                                        reload_form()
                                        reload_table()
                                    } else {
                                        layer.alert(res.msg)
                                    }
                                },
                                dataType: 'json',
                                error: function (xhr, status, err) {
                                    layer.alert("系统错误，请重试");
                                },
                                complete: function () {
                                    layer.close(index)
                                }
                            });
                            layer.close(confirm_index);
                        });
                    } else {
                        return false
                    }
                }
            });
        }

        {#清空表格，初始化地址下拉框#}

        function init_form() {
            $p_form[0].reset()
            $('#province,#city,#county').html()
            bioarea.render({
                elem: '#bioarea-wrap',
                defaultData: {
                    provinceCode: '530000',
                    cityCode: '530100',
                    countyCode: '530114'
                },
                form
            });
        }

        //自己写的方法，可能有bug
        //清空表格，指定默认的地址下拉框取值
        function reload_form(defaultData) {
            if (!defaultData) {
                defaultData = {
                    provinceCode: '530000',
                    cityCode: '530100',
                    countyCode: '530114'
                }
            }
            $p_form[0].reset()
            $('#province,#city,#county').html()
            bioarea.reload({
                elem: '#bioarea-wrap',
                defaultData: defaultData,
                form
            });
        }
    });
</script>
</body>
</html>